<template>
  <!-- 当成一个独立的组件来展示 当一个二级路由的话 就是需要chridran属性了 -->
  <div class="shop_container" ref="shoplist">
    <ul class="shop_list" v-if="shops.length">
      <!-- 做的就是找到对应的数据 进行动态展示  mock数据就写了一个-->
      <!-- 如果对应显示的话 就要指定shop 的标识才显示对应的商家 就是后台返回的请求路径 拼接上去  循环的时候就会依次添加 -->
      <li
        class="shop_li border-1px"
        v-for="(shop,index) in shops"
        :key="index"
        @click="$router.push('/shop')"
      >
        <a>
          <div class="shop_left">
            <!-- <img class="shop_img" :src="baseImgUrl+shop.image_path"> -->
            <img class="shop_img" src="./images/shop/1.jpg" />
          </div>
          <div class="shop_right">
            <section class="shop_detail_header">
              <h4 class="shop_title ellipsis">{{shop.name}}</h4>
              <ul class="shop_detail_ul">
                <li
                  class="supports"
                  v-for="(support, index) in shop.supports"
                  :key="index"
                >{{support.icon_name}}</li>
              </ul>
            </section>
            <section class="shop_rating_order">
              <section class="shop_rating_order_left">
                <!-- 星星动态渲染 -->
                <stars :score="shop.rating" :size="24"></stars>
                <div class="rating_section">{{shop.rating}}</div>
                <div class="order_section">月售{{shop.recent_order_num}}单</div>
              </section>
              <section class="shop_rating_order_right">
                <span class="delivery_style delivery_right">{{shop.delivery_mode.text}}</span>
              </section>
            </section>
            <section class="shop_distance">
              <p class="shop_delivery_msg">
                <span>¥{{shop.float_minimum_order_amount}}起送</span>
                <span class="segmentation">/</span>
                <span>配送费约¥{{shop.float_delivery_fee}}</span>
              </p>
            </section>
          </div>
        </a>
      </li>
    </ul>
    <ul v-else>
      <li v-for="(i,k) in 6" :key="k">
        <img src="./images/shop_back.svg" alt />
      </li>
    </ul>
  </div>
</template>

<script>
// 读取数据state里面
import { mapState } from "vuex";
import BScroll from "better-scroll";
import Stars from "components/Star/Stars";
export default {
  name: "ShopList",
  components: {
    Stars,
  },
  data() {
    return {
      //接口失效
      // baseImgUrl: 'http://cangdu.org:8001/img/'
    };
  },
  computed: {
    ...mapState(["shops"]),

  },
  mounted() {
        //调用方法获取异步数据 存在vuex状态里面  这里不通过want监听属性变化的了
    this.$store.dispatch("getShops", () => {
      //数据更新后执行
      this.$nextTick(() => {
        //列表数据更新显示后执行
        //列表显示之后创建 左右都需要  这个函数就是获取到数据的时候就执行了
        this.shoplist();
      });
    });

  },
  methods: {
    shoplist() {
      if (this.shops.length) {
        //滚动的要大于包裹的高度才可以
        this.$nextTick(() => {
            new BScroll(this.$refs.shoplist, {
            probeType: 2, // 因为惯性滑动不会触发
          });
        });
      }
    },
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl';

.shop_container {
  margin-bottom: 50px;
  height: 100vh - 40px;
  position: relative;

  .shop_list {
    .shop_li {
      bottom-border-1px(#f1f1f1);
      width: 100%;

      >a {
        clearFix();
        display: block;
        box-sizing: border-box;
        padding: 15px 8px;
        width: 100%;

        .shop_left {
          float: left;
          box-sizing: border-box;
          width: 23%;
          height: 75px;
          padding-right: 10px;

          .shop_img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .shop_right {
          float: right;
          width: 77%;

          .shop_detail_header {
            clearFix();
            width: 100%;

            .shop_title {
              float: left;
              width: 200px;
              color: #333;
              font-size: 16px;
              line-height: 16px;
              font-weight: 700;

              &::before {
                content: '品牌';
                display: inline-block;
                font-size: 11px;
                line-height: 11px;
                color: #333;
                background-color: #ffd930;
                padding: 2px 2px;
                border-radius: 2px;
                margin-right: 5px;
              }
            }

            .shop_detail_ul {
              float: right;
              margin-top: 3px;

              .supports {
                float: left;
                font-size: 10px;
                color: #999;
                border: 1px solid #f1f1f1;
                padding: 0 2px;
                border-radius: 2px;
              }
            }
          }

          .shop_rating_order {
            clearFix();
            width: 100%;
            margin-top: 18px;
            margin-bottom: 8px;

            .shop_rating_order_left {
              float: left;
              color: #ff9a0d;

              .rating_section {
                float: left;
                font-size: 10px;
                color: #ff6000;
                margin-left: 4px;
              }

              .order_section {
                float: left;
                font-size: 10px;
                color: #666;
                transform: scale(0.8);
              }
            }

            .shop_rating_order_right {
              float: right;
              font-size: 0;

              .delivery_style {
                transform-origin: 35px 0;
                transform: scale(0.7);
                display: inline-block;
                font-size: 12px;
                padding: 1px;
                border-radius: 2px;
              }

              .delivery_left {
                color: #fff;
                margin-right: -10px;
                background-color: #02a774;
                border: 1px solid #02a774;
              }

              .delivery_right {
                color: #02a774;
                border: 1px solid #02a774;
              }
            }
          }

          .shop_distance {
            clearFix();
            width: 100%;
            font-size: 12px;

            .shop_delivery_msg {
              float: left;
              transform-origin: 0;
              transform: scale(0.9);
              color: #666;
            }

            .segmentation {
              color: #ccc;
            }
          }
        }
      }
    }
  }
}
</style>